<template>
  <!-- components: columnList -->
  <div class="post-list">
    <article
      class = "card mb-3 shadow-sm"
      v-for="post in list"
      v-bind:key="post._id"
    >
      <div class="card-body">
        <h4><router-link :to="`/posts/${post._id}/`">{{post.title}}</router-link></h4>
        <div class = "row my-3 align-items-center">
          <div class = "col-3" v-if="post.image">
            <img
              class = "rounded-lg w-100"
              v-bind:src="post.image.url"
              v-bind:alt="post.title"
            >
          </div>
          <p v-bind:class="{'col-9': post.image}">{{post.excerpt}}</p>
        </div>
        <span class = "text-muted">{{post.createdAt}}</span>
      </div>
    </article>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
// 导入 数据
import { PostProps, ImageProps } from '@/assets/js/store'
// 导入 helper
import { generateFitUrl } from '@/assets/js/helper'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  name: 'PostList',

  // 传递数据
  props: {
    list: {
      required: true,
      type: Array as PropType<PostProps[]>
    }
  },

  // 组合式api入口
  setup (props) {
    const posts = computed(() => {
      return props.list.map(post => {
        generateFitUrl(post.image as ImageProps, 200, 110, ['m_fill'])
        return post
      })
    })
    return {
      posts
    }
  }
})
</script>

<style lang = "css" scoped>
.post-list h4 a {
  text-decoration: none;
  color:#1a1a1a;
}
.post-list h4 a:hover {
  color:#0d6efd;
}
</style>
